<template>
  <div class="my-play" :style="{ bottom: active ? '-60px' : '' }">
    <audio
      ref="audioRef"
      preload="auto"
      @timeupdate="updateSongTime"
      @canplay="canplaySong"
      @error="errorSong"
      @playing="playSong"
      @ended="endedSong"
    >
      <source :src="fileurl" type="audio/mpeg" />
    </audio>
    <div class="control">
      <div class="play-control">
        <i class="el-icon-arrow-left"></i>
        <i
          :class="
            audioStatus == 'play' ? 'el-icon-video-play' : 'el-icon-video-pause'
          "
          @click="play"
          :style="{ color: audioStatus == 'play' ? '' : '#3d74f0' }"
        ></i>
        <i class="el-icon-arrow-right"></i>
      </div>
      <div class="progress-bar">
        <img :src="playImg" />
        <span>{{ currentTime }}</span>

        <progress-line
          class="audioProgress"
          :progressWidth="audioProgressWidth"
          @setProgressLine="setAudioProgress"
        ></progress-line>
        <span>{{ totalTime }}</span>
      </div>
      <div class="volume-control">
        <playList></playList>
        <span class="loop" @click="change">
          <i class="iconfont" v-show="index == 0">&#xe66d;</i>
          <i class="iconfont" v-show="index == 1">&#xea7c;</i>
          <i class="iconfont" v-show="index == 2">&#xe6a2;</i>
        </span>
        <lyric></lyric>
        <volume></volume>
      </div>
    </div>
    <span class="lock" @click="lockhandel">
      <i class="iconfont" v-if="isLock">&#xe8d5;</i>
      <i class="iconfont" v-else>&#xe8d4;</i>
    </span>
  </div>
</template>

<script>
import playList from "./lyric.vue";
import lyric from "./playList.vue";
import ProgressLine from "./progressLine.vue";
import Volume from "./volume.vue";
import { mapMutations } from "vuex";
import { formatSongTime } from "@/utils/public";
export default {
  name: "myPlay",
  components: {
    playList,
    lyric,
    ProgressLine,
    Volume,
  },
  data() {
    return {
      initAudioReady: false, // 初始化音频准备
      currentTime: 0, // 当前播放时间
      totalTime: 0, //音频总时长
      audioStatus: "play",
      active: false,
      isLock: false,
      index: 0,
      btnLeft: 180,
      barwidth: 180,
      playImg: "",
      playMode: 0, // 播放模式  0循环播放、1单曲循环、2随机播放
      fileurl:
        "http://m801.music.126.net/20220606144549/8e3e308e0be0d80fe9a7f521519b5be7/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/14768039830/10d3/bbb2/28b1/178bcdcd789348b17300d2c7a4dedefe.mp3",
      i: 0,
    };
  },
  computed: {
    audioProgressWidth() {
      // 音频进度条长度
      return (this.currentTime / this.totalTime) * 100 + "%";
    },
  },
  mounted() {
    this.img();
  },
  methods: {
    ...mapMutations({
      setPlayStatus: "SET_PLAYSTATUS",
      setPlayList: "SET_PLAYLIST",
      setPlayIndex: "SET_PLAYINDEX",
    }),
    // 播放暂停控制
    play() {
      let recordAudio = this.$refs.audioRef; // 获取audio元素
      if (recordAudio.paused) {
        recordAudio.play();
        this.audioStatus = "pause";
      } else {
        recordAudio.pause();
        this.audioStatus = "play";
      }
    },

    // 控制条显示隐藏
    lockhandel() {
      this.active = !this.active;
      this.isLock = !this.isLock;
    },
    // 列表循环模式
    change() {
      if (this.index >= 2) {
        this.index = 0;
      } else {
        this.index++;
      }
    },
    img() {
      if (!this.playImg) {
        this.playImg =
          "https://s4.music.126.net/style/web2/img/default/default_album.jpg";
      }
    },

    // 点击拖拽进度条，设置当前时间
    setAudioProgress(params) {
      this.initAudioReady = false;
      this.currentTime = params.val * this.totalTime;
      // 拖拽的时候，不实时更改音频的时间
      if (params.flag) {
        this.$refs.audioRef.currentTime = params.val * this.totalTime;
      }
    },

    // 刷新时音频准备就绪
    canplaySong(e) {
      this.initAudioReady = true;
      console.log(e);
    },

    // 监听音频时间， 实时更新当前播放时间
    updateSongTime(e) {
      if (!this.initAudioReady) {
        return;
      }
      this.currentTime = this.formatSongTime(e.target.currentTime);
      console.log(this.currentTime);
    },

    // 音频加载失败
    errorSong(e) {
      this.initAudioReady = false;
      this.setPlayStatus(false);
    },

    // 音频播放时候 初始化状态，获取音频总时长
    playSong(e) {
      this.initAudioReady = true;
      this.setPlayStatus(true);
      this.totalTime = this.formatSongTime(e.target.duration);
      console.log(this.totalTime);
    },

    // 音频播放结束 自动播放下一首
    endedSong(e) {
      if (this.playMode === 1) {
        this.loopSong();
      } else {
        this.changeSong("next");
      }
    },

    formatSongTime(duration = 0) {
      const m = (Math.floor(duration / 60) + "").padStart(2, "0");
      const s = (Math.floor(duration % 60) + "").padStart(2, "0");
      return `${m}:${s}`;
    },
  },
};
</script>

<style lang="less" scoped>
@fontColor: #3d74f0;
@color: #666;

.my-play {
  width: 100%;
  height: 60px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  z-index: 9;
  transition: all 0.3s;

  .control {
    width: 1200px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .play-control {
      display: flex;
      width: 130px;
      justify-content: space-between;
      align-items: center;

      i {
        font-size: 30px;
        color: @color;
        cursor: pointer;
      }

      i:nth-child(2) {
        font-size: 40px;
        cursor: pointer;
      }

      i:hover {
        color: @fontColor;
        cursor: pointer;
      }
    }

    .progress-bar {
      width: 850px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      img {
        width: 40px;
        height: 40px;
        border-radius: 5px;
        cursor: pointer;
      }
      .audioProgress {
        width: 700px;
      }
      span {
        color: @color;
        font-family: "hmR";
      }
    }

    .volume-control {
      width: 150px;
      display: flex;
      justify-content: space-between;
      .loop {
        color: #3d74f0;
      }
      .iconfont {
        font-size: 25px;
        user-select: none;
        cursor: pointer;
      }
      .iconfont:hover {
        color: @fontColor;
      }
    }
  }

  .lock {
    position: absolute;
    right: 50px;
    top: -20px;
    width: 50px;
    height: 20px;
    background: @fontColor;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    .iconfont {
      color: #fff;
      line-height: 20px;
    }
  }
}
</style>